<template>
	<view class="content">
		<view class="subTxt">
			{{subObj.subjectDesc}}
		</view>
		<view class="imgInfo-v"v-show="subObj.subImg.length>0">
			<image mode="widthFix" :src="subObj.subImg"></image>
		</view>
		<view class="option-v">
			<view @click="selecedAnswer('A')" class="option optionA"><text v-if="isError == 'A'" class="optionPrefix errorOption">X</text><text v-if="isError != 'A'" class="optionPrefix" :class="isRight == 'A'?'rightOption':''">A</text>{{subObj.optionA}}</view>
			<view @click="selecedAnswer('B')" class="option optionB"><text v-if="isError == 'B'" class="optionPrefix errorOption">X</text><text v-if="isError != 'B'" class="optionPrefix" :class="isRight == 'B'?'rightOption':''">B</text>{{subObj.optionB}}</view>
			<view @click="selecedAnswer('C')" v-show="subObj.optionC!=null && subObj.optionC.length>0"  class="option optionC"><text v-if="isError == 'C'" class="optionPrefix errorOption">X</text><text v-if="isError != 'C'" class="optionPrefix" :class="isRight == 'C'?'rightOption':''">C</text>{{subObj.optionC}}</view>
			<view @click="selecedAnswer('D')" v-show="subObj.optionD!=null && subObj.optionD.length>0" class="option optionD"><text v-if="isError == 'D'" class="optionPrefix errorOption">X</text><text v-if="isError != 'D'" class="optionPrefix" :class="isRight == 'D'?'rightOption':''">D</text>{{subObj.optionD}}</view>
		</view>
		
		<view class="right-Answer" v-show="isRight.length>0">
			<view class="r-desc">答案：{{subObj.resultTxt}}</view>
		</view>
		<view class="next">
			<image @click="getPre" class="preImg" src="../../../static/img/lifetool/drivingexam/pre.png" mode="widthFix"></image>
			<image @click="getNext" class="nextImg" src="../../../static/img/lifetool/drivingexam/next.png" mode="widthFix"></image>
		</view>
		<view class="tool">
			<view class="collect" @click="doCollect">
				<image v-show="isCollect" src="../../../static/img/lifetool/drivingexam/answer-collect.png"></image>
				<image v-show="!isCollect" src="../../../static/img/lifetool/drivingexam/answer-toCollect.png"></image>
				<text v-show="!isCollect" class="txt">收藏</text>
				<text v-show="isCollect" class="txt">已收藏</text>
			</view>
			<view class="clearBtn" @click="toClearRecord">清空记录</view>
			<view class="allSub" @click="toAllSub">所有题目</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				drivingType:1,//驾驶证类型
				subType:1,//科目
				subOrder:1,//当前题目
				isError:'',//回答错误选项
				isRight:'',//正确的选项
				isCollect:false,
				subObj:{
					'subjectDesc':''
				}
			}
		},onLoad(options) {
			
			let subOrder = options.subOrder;
			if(undefined != subOrder && null != subOrder){
				this.subOrder = subOrder;
			}
			this.drivingType = uni.getStorageSync('drivingType');
			this.subType = uni.getStorageSync('subType');
			
			let opts = {
				url: 'driving/getDrivingExam/'+this.drivingType+'/'+this.subType+'/'+this.subOrder,
				method: 'get'
			};
			let param = {
			};
			this.tokenRequest(opts, param).then(res => {
				uni.hideLoading();
				let rData = res.data;
				this.subObj = rData;
				this.isCollect = this.subObj.isCollect;
				//是否答题过
				let myAnswerStatus = this.subObj.myAnswerStatus ;
				if(myAnswerStatus != -1){
					if(myAnswerStatus == 1){//错误
						this.isRight = this.subObj.resultTxt;
						this.isError = this.subObj.answerTxt;
					}else{//正确
						this.isError = '';
						this.isRight = this.subObj.resultTxt;
					}
				}
			}, error => {})
		},computed:{
		},methods:{
			toAllSub(){
				uni.redirectTo({
					url:'allSub?subType='+this.subType
				})
			},
			toClearRecord(){
				let that = this;
				uni.showModal({
				    title:'提示',
				    content:'确定要清空所有的做题和收藏记录？',
				    success: function (res) {
				        if (res.confirm) {
				            let opts = {
				            	url: 'driving/clearCollect',
				            	method: 'post'
				            }; 
				            let param = {
				            };
				            that.tokenRequest(opts, param).then(res => {
				            	uni.hideLoading();
								uni.showToast({
									title:'清空完成',
									icon:'none',
									mask:true,
									duration:1000
								})
								that.isError = '';
								that.isRight = '';
				            }, error => {})
				        } else if (res.cancel) {
				            
				        }
				    }
				});
			},
			answerSub(collectType,answerTxt){
				let opts = {
					url: 'driving/answerSub',
					method: 'post'
				}; 
				let param = {
					subId:this.subObj.id,
					collectType:collectType,
					answerTxt:answerTxt
				};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
				}, error => {})
			},
			selecedAnswer(val){
				if(this.isRight.length>0){
					return;
				}
				//回答错误
				if(val != this.subObj.resultTxt){
					this.isError = val;
					this.isRight = this.subObj.resultTxt;
					this.answerSub(1,val);
				}else{//回答正确
					this.isRight = this.subObj.resultTxt;
					uni.showToast({
						title:'回答正确',
						mask:true,
						duration:1000
					})
					this.answerSub(2,val);
					let that = this;
					setTimeout(function(){
						that.getNext();
					},1000)
				}
			},
			doCollect(){//收藏
				let opts = {
					url: 'driving/collectSub',
					method: 'post'
				}; 
				let param = {
					subId:this.subObj.id
				};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rMsg = res.msg;
					let rData = res.data;
					uni.showToast({
						title:rMsg,
						icon:'none',
						mask:true
					})
					if(rData == 1){
						this.isCollect = true;
					}else{
						this.isCollect = false;
					}
				}, error => {})
			},
			getPre(){
				if(this.subOrder == 1){
					uni.showToast({
						icon:'none',
						title:'已到第一题了',
						mask:true
					})
					return;
				}
				this.subOrder--;
				let opts = {
					url: 'driving/getDrivingExam/'+this.drivingType+'/'+this.subType+'/'+this.subOrder,
					method: 'get'
				}; 
				let param = {
				};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					this.subObj = rData;
					this.isCollect = this.subObj.isCollect;
					this.isCollect = this.subObj.isCollect;
					//初始化
					this.isError = '';
					this.isRight = '';
					//是否答题过
					let myAnswerStatus = this.subObj.myAnswerStatus ;
					if(myAnswerStatus != -1){
						if(myAnswerStatus == 1){//错误
							this.isRight = this.subObj.resultTxt;
							this.isError = this.subObj.answerTxt;
						}else{//正确
							this.isError = '';
							this.isRight = this.subObj.resultTxt;
						}
						return;
					}
				}, error => {})
			},
			getNext(){
				this.subOrder++;
				let opts = {
					url: 'driving/getDrivingExam/'+this.drivingType+'/'+this.subType+'/'+this.subOrder,
					method: 'get'
				}; 
				let param = {
				};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					this.subObj = rData;
					this.isCollect = this.subObj.isCollect;
					//初始化
					this.isError = '';
					this.isRight = '';
					//是否答题过
					let myAnswerStatus = this.subObj.myAnswerStatus ;
					if(myAnswerStatus != -1){
						console.log(myAnswerStatus)
						if(myAnswerStatus == 1){//错误
							this.isRight = this.subObj.resultTxt;
							this.isError = this.subObj.answerTxt;
						}else{//正确
							this.isError = '';
							this.isRight = this.subObj.resultTxt;
						}
						return;
					}
				}, error => {})
			}
		}
	}
</script>

<style>
	.clearBtn,.allSub{
		float: right;
		font-size: 30rpx;
		font-weight: 800;
		color: #e98f36;
		margin-right: 20rpx;
	}
	.allSub{
		color: #007AFF;
	}
	.next{
		font-size: 30rpx;
		margin-top: 30rpx;
	}
	.imgInfo-v image{
		width: calc(100% - 5rpx);
	}
	.next .nextImg{
		width: 80rpx;
		float: right;
	}
	.next .preImg{
		width: 80rpx;
		float: left;
		margin-left: 20rpx;
	}
	.r-desc{
		background-color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 5rpx;
		color: #5fb91f;
		font-weight: 800;
	}
	.tool{
		position: fixed;
		border-radius: 10rpx;
		bottom: 20rpx;
		background-color: #fff;
		width: calc(100% - 60rpx);
		padding: 10rpx;
		line-height: 60rpx;
	}
	.errorOption{
		color: #fff;
		background-color: #ED1941;
	}
	.rightOption{
		color: #fff;
		background-color: #5fb91f;
	}
	.collect{
		line-height: 60rpx;
		float: left;
	}
	.collect .txt{
		font-size: 30rpx;
	}
	.collect image{
		vertical-align: middle;
		width: 50rpx;
		height: 50rpx;
	}
	.content{
		margin: 20rpx;
	}
	.subTxt{
		margin-bottom: 20rpx;
		font-weight: 700;
	}
	.option{
		margin-bottom: 10rpx;
	}
	.optionPrefix{
		text-align: center;
		margin: 20rpx;
		font-size: 32rpx;
		width: 50rpx;
		border-radius: 50%;
		display: inline-block;
		line-height: 50rpx;
		box-shadow: 0 0 9rpx 3rpx #b2b2b2;
	}
</style>
